<html>
<head>
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript" src="../lib/raphael.js"></script>
<script type="text/javascript" src="../raphael-toys.js"></script>
<script type="text/javascript" src="../graph-views.js"></script>
<script type="text/javascript" src="../graph-models.js"></script>
<script type="text/javascript">
	function parse_data(){		
		data = new DataTable();		
		var data_str = $('data').value;
		var rows = data_str.split("\n");
		
		
		
		for(var i=0; i < rows.length; i++){			
			if ( rows[i].strip() == ""){ continue; }
			
			var row_num = [];
			var els = rows[i].split(",");
			
			for(var j=0; j < els.length; j++){
				if(i==0){
					data.add_column( els[j] );
					continue;
				}
				
				var val = els[j];
				if(j>0){ val = parseFloat(val) };
				
				row_num.push( val );
			}
			if(i > 0){			
			data.add_row(row_num);}
		};
		
		return data;
	};
	Event.observe(window, 'load', function(evt){
		
	
	/* Old test dataset - no constructed dynamically	
	var male_data = new DataTable();	
	male_data.add_column("Age");
	male_data.add_column("Sugar level");
	male_data.add_column("Coffee level");
	male_data.add_column("Alcohol level");
	male_data.add_row([13,99, 20, 5]);	
	male_data.add_row([15,99, 21, 50]);	
	male_data.add_row([19,65, 31, 87]);
	male_data.add_row([22,44, 67, 88]);
	male_data.add_row([24,31, 73, 69]);
	male_data.add_row([27,22, 75, 59]);
	male_data.add_row([29,21, 76, 57]);
	male_data.add_row([31,20, 75, 56]);	
	*/
	
	// Create the graphs
	var paper = Raphael('graph_div', 420, 250);
	    
	
	function load_data_1(evt){
		var v = "Age, Sugar Level, Coffee Level, Alcohol Level\n"
		+"13,99, 20, 5\n"
		+"15,99, 21, 50\n"
		+"19,65, 31, 87\n"
		+"22,44, 67, 88\n"
		+"24,31, 73, 69\n"
		+"27,22, 75, 59\n"
		+"29,21, 76, 57\n"
		+"31,20, 75, 56";
		
		$('data').value = v;
	}

	$('load_data_1').observe('click', load_data_1);
		
	
	$('load_data_2').observe('click', function(evt){
		var v = "Corporation, Profit\n"
		+"Wall Mart, 324\n"
		+"Costco, 230\n"
		+"LCBO, 201\n";
		
		
		$('data').value = v;
		
	});
	
        $('load_linear_graph').observe('click', load_lin);

		function load_lin(evt){
		$('graph_div').update('');		
		data = parse_data();	
		
		var paper = Raphael('graph_div', 420, 250);
		var line = paper.toys.line_graph();	
		var line_options = {'x_ticks' : [14, 15, 30,31]};
		line.draw(data, line_options);		
		};
	
	$('load_bar_graph').observe('click', function(evt){
		$('graph_div').update('');
		data = parse_data();	
		
		var paper = Raphael('graph_div', 420, 250);
		
		var bar = paper.toys.bar_graph();
		bar.draw(data);
	});
	$('load_bar_graph2').observe('click', function(evt){
		$('graph_div').update('');
		data = parse_data();	
		
		var paper = Raphael('graph_div', 420, 250);
		
		var bar = paper.toys.bar_graph();
		var options = {'chubby' : true};
		bar.draw(data, options);
	});
	
	$('load_pie_graph').observe('click', function(evt){


		$('graph_div').update('');
		data = parse_data();	
		var paper = Raphael('graph_div', 420, 250);
		
		var pie = paper.toys.pie_graph();
		pie.draw(data);	
	});
	
	
	
	$('load_all').observe('click', function(evt){
		$('graph_div').update('');
		
		var pie = Raphael('div1', 420, 250).toys.pie_graph();
		var line = Raphael('div2', 420, 250).toys.line_graph();	
		var bar = Raphael('div3', 420, 250).toys.bar_graph();
		
		pie.draw(data);
		bar.draw(data);
		line.draw(data);
	});
	
	load_data_1();
	load_lin();
	
});    
</script>
<title>Raphael Toys Examples</title>
</head>

<body>
	<h2>Raphael Toys Examples</h2>
	<i>Plot graph</i>
	<input id="load_linear_graph" type="button" value="Linear Graph">
	<input id="load_bar_graph" type="button" value="Bar Graph" class="btn">
	<input id="load_bar_graph2" type="button" value="Chubby Bar Graph" class="btn">
	<input id="load_pie_graph" type="button" value="Pie Graph" class="btn">
	<input id="load_all" type="button" value="All Graphs" class="btn">    



<div id="dynamic_bar_graph">    
	<i>Load sample data</i>
    <input id="load_data_1" type="button" value="Sample data A" class="btn"> 
    <input id="load_data_2" type="button" value="Sample data B" class="btn">
    <br>
    <textarea id="data" cols=60 rows=9></textarea>
    
        
    <div id="hover_bar"> </div>
    <div id="selected_bar"> </div>

    
    <div style="margin-left:100px;" id="graph_div"></div>
    
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>


</body>
</html>
